<template>
	<view class="table-container">
		<view class="table-left">
			<view class="table-name-input">
				<input type="text" v-model="name" maxlength="10" disabled />
			</view>
			<view class="order-button-container">
				<view class="button back" @click="back">返回主页</view>
				<view class="button save" @click="ok" v-if="table.status === 0">设置已付</view>
				<view class="button save" @click="append" v-if="table.status === 1">继续加餐</view>

				<!-- 颜色说明 -->
				<view class="describe">
					<view class="serving-ok">完全交付顾客</view>
					<view class="serving-half">一半交付顾客</view>
					<view class="serving-no">交付厨师加工</view>
					<view class="serving-one">没有拿取物资</view>
				</view>
			</view>



			<!-- 已经点过的 -->
			<view class="order-lists history-order" v-for="(order,indexT) in table.order" :key="indexT">
				<view style="padding-bottom: 10px;">第{{ (indexT+1) }}次订单</view>
				<view
					:class="'order-item ' + (item.status===3?'serving-ok':(item.status===2?'serving-half':(item.status===1?'serving-no':'serving-one')))"
					v-for="(item,index) in order" :key="index" @click="serving(item)">
					<view class="order-name">{{ item.name }}</view>
					<view class="order-num">×{{ item.num}}</view>
					<view class="order-money">￥{{ item.money * item.num}}</view>
				</view>
				<view class="order-item">
					<view class="order-name">总金额</view>
					<view class="order-money">￥{{ totalMoneyFunc(order) }}</view>
				</view>
			</view>
			<view class="order-total" @longpress="updateMoney">总消费金额：<span>{{ table.money }}元</span></view>

			<!-- 修改金额模态框 -->
			<uni-popup ref="updateMoneyModel" type="center">
				<view class="updateMoneyModel">
					<view class="title">修改金额</view>
					<view class="note">金额：<span class="money-describe">(原价：{{ totalMoneyAll }})</span></view>
					<view class="textarea">
						<input type="number" v-model="table.money" placeholder="请输入金额" />
					</view>
					<view class="note">备注：</view>
					<view class="textarea">
						<textarea v-model="table.note" placeholder="请输入备注" />
					</view>
					<view class="modelButton" @click="saveMoney">确定</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "X号桌",
				table: {}
			}
		},
		onLoad(data) {
			this.table = JSON.parse(this.$common.getStorage(data.name, JSON.stringify({})))
			this.name = this.table.name
		},
		computed: {
			totalMoneyAll() {
				var money = 0
				this.table.order.forEach((item) => {
					item.forEach((order) => {
						money += parseInt(order.money * order.num)
					})
				})
				return money
			}
		},
		methods: {
			// 返回
			back() {
				uni.navigateBack()
			},
			// 设置订单付款
			ok() {
				uni.showModal({
					'title': "提示",
					'content': "此餐桌是否付款？",
					success: (res) => {
						if (res.confirm) {
							this.table.status = 1;
							uni.setStorageSync(this.table.name, JSON.stringify(this.table))
							uni.showToast({
								title: "付款成功~"
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 2000)
						}
					}
				})
			},
			// 设置又加餐
			append() {
				uni.showModal({
					'title': "提示",
					'content': "该操作将改变餐桌为未付款，确定继续？",
					success: (res) => {
						if (res.confirm) {
							this.table.status = 0;
							uni.setStorageSync(this.table.name, JSON.stringify(this.table))
							uni.showToast({
								title: "设置成功~"
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 2000)
						}
					}
				})
			},
			// 统计价格
			totalMoneyFunc(order) {
				let totalMoney = 0
				order.find((item) => {
					totalMoney += item.num * item.money
				})
				return totalMoney
			},
			// 上菜设置  undefined等于没拿物资   1等于拿完物资还没做好    2等于做好了一半送过去了需要补充  3等于已经做好给顾客送过去了
			serving(item) {
				if (item.status === undefined) {
					item.status = 1
				} else if (item.status === 1) {
					item.status = 2
				} else if (item.status === 2) {
					item.status = 3
				} else {
					item.status = undefined
				}
				uni.setStorageSync(this.table.name, JSON.stringify(this.table))
				this.table = JSON.parse(this.$common.getStorage(this.table.name, JSON.stringify({})))
			},
			// 修改订单金额
			updateMoney() {
				this.$refs['updateMoneyModel'].open()
			},
			// 保存订单金额
			saveMoney() {
				uni.setStorageSync(this.table.name, JSON.stringify(this.table))
				uni.showToast({
					'title': "保存成功"
				})
				this.$refs['updateMoneyModel'].close()
			}
		}
	}
</script>

<style>
	uni-page-body,
	#app {
		width: 100%;
		height: 100%;
	}

	.table-container {
		width: 100%;
		height: 100%;
		display: flex;
	}

	.table-left {
		width: 100%;
		height: calc(100% - 71px);
		overflow: scroll;
	}

	.order-button-container {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30px 0;
		position: sticky;
		top: 0;
		background-color: white;
		z-index: 10;
	}

	.table-right {
		position: relative;
		width: calc(100% - 300px);
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: scroll;
	}

	.menu {
		width: 100%;
		height: 40px;
		text-align: center;
		font-size: 30px;
		border-bottom: 2px solid #333333;
		padding: 10px 0 10px 0;
	}

	.menu-lists {
		width: 100%;
		height: calc(100% - 102px);
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: scroll;
		padding: 20px 0;
	}

	.back {
		text-align: center;
		background-color: #4F4745;
		border-radius: 10px;
	}

	.save {
		text-align: center;
		background-color: #00aaff;
		border-radius: 10px;
	}

	.table-name-input {
		margin: 30px auto;
		width: 90%;
		box-sizing: border-box;
		font-size: 20px;
		border: 1px solid #d4d4d4;
	}

	.order-lists {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.history-order {
		padding-bottom: 50px;
		color: #333333;
	}

	.order-item {
		font-size: 18px;
		width: 90%;
		display: flex;
		justify-content: center;
		border-bottom: 1px solid #333333;
		margin-bottom: 5px;
		padding-bottom: 5px;
		text-align: center;
	}

	.serving-ok {
		background-color: #abf3ab;
	}

	.serving-half {
		background-color: #ffbe93;
	}

	.serving-no {
		background-color: #c9eeff;
	}

	.serving-one {
		background-color: #d4d4d4;
	}

	.order-name {
		width: 40%;
	}

	.order-num {
		width: 20%;
		color: #007AFF;
	}

	.order-money {
		width: 40%;
		color: red;
	}

	.order-total {
		position: fixed;
		bottom: 0;
		background-color: #dd0003;
		width: 100%;
		text-align: center;
		padding: 20px 0;
		font-size: 24px;
		color: yellow;
	}

	.table-name-input input {
		font-size: 24px;
		text-align: center;
	}

	.goods-item {
		width: 80%;
		height: 40px;
		border: 1px solid #333333;
		box-sizing: border-box;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-bottom: 10px;
	}

	.goods-name {
		width: 180px;
		font-size: 18px;
	}

	.goods-money {
		font-size: 18px;
	}

	.describe {
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		padding-bottom: 30px;
		position: absolute;
		right: 20px;
		top: 20px;
	}

	.describe view {
		padding: 0 10px;
	}

	.updateMoneyModel {
		width: 250px;
		height: 300px;
		background-color: #e7e7e7;
		border-radius: 10px;
		position: relative;
		overflow: hidden;
	}

	.title {
		text-align: center;
		font-size: 14px;
		border-bottom: 1px solid #767676;
		padding: 10px 0;
		box-sizing: border-box;
	}

	.textarea input {
		width: 95%;
		font-size: 15px;
		border: 1px solid #767676;
		margin: 0 auto;
	}

	.note {
		width: 95%;
		margin: 0 auto;
		padding: 10px 0;
		font-size: 15px;
	}

	.money-describe {
		color: red;
		font-size: 12px;
	}

	.textarea textarea {
		width: 95%;
		height: 100px;
		font-size: 15px;
		border: 1px solid #767676;
		margin: 0 auto;
	}

	.modelButton {
		width: 100%;
		text-align: center;
		font-size: 14px;
		border-top: 1px solid #767676;
		padding: 10px 0;
		box-sizing: border-box;
		position: absolute;
		bottom: 0;
		transition: 0.2s;
	}

	.modelButton:hover {
		background-color: #adadad;
	}

	@media all and (max-width: 700px) {
		.describe {
			position: unset;
		}
	}
</style>
